<template >
  <div class="main" :style="note">
<div id="contain" style="display: flex;justify-content: center;">
  <el-card class="box-card" style="margin-top: 150px;">

    <div slot="header" class="clearfix">
      <span>登录</span>
    </div>
    <el-form >
      <el-form-item>
        <el-input  placeholder="输入用户名" v-model="userName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input show-password placeholder="密码" v-model="passWord"></el-input>
      </el-form-item>
      <div>
        <el-button type="primary" style="width:100%" size="mini" @click="doLogin()">登录</el-button>
      </div>
      <div style="margin-top: 2px">
        <a style="font-size: 8px;cursor: pointer;color: #0066FF" @click="show()">还没账户？点击注册</a>
      </div>

    </el-form>

  </el-card>
  <el-dialog :visible="showRegister" @close="close()" close-on-click-modal width="30%">
    <div slot="title" ><span style="font-weight: bold;font-size: 20px">填写注册信息</span></div>
    <el-form label-width="80px" >
      <el-form-item label="登录账号" >
        <el-input v-model="resParams.account"></el-input>
      </el-form-item>
      <el-form-item label="用户名" >
        <el-input v-model="resParams.name"></el-input>
      </el-form-item>
      <el-form-item label="密码">
        <el-input show-password v-model="resParams.password"></el-input>
      </el-form-item>
      <el-form-item label="性别">
        <el-select placeholder="选择你的性别" v-model="resParams.gender">
          <el-option
            v-for="item in genderList"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="个人简介">
        <el-input type="textarea" v-model="resParams.introduce" placeholder="介绍下你自己吧"></el-input>
      </el-form-item>

    </el-form>
    <div style="margin-left: 60%">
      <el-button type="primary" @click="register()">注册</el-button>
      <el-button type="primary" @click="close()">取消</el-button>
    </div>
  </el-dialog>
</div>
</div>
</template>

<script>

    export default {
        name: "Login",
      components: {
      },
      data () {
        return {
          note: {
            backgroundImage: "url(" + require("../assets/back.jpg") + ")",
            backgroundSize: " auto",
            height:"800px",
            backgroundRepeat: "no-repeat ",//不重复
            backgroundSize: "100% 100%"
          },
          userName:'',
          passWord:'',
          showRegister:false,
          resParams:{
            account:'',
            name:'',
            password:'',
            gender:1,
            introduce:''
          },
          genderList:[
            {
              label:'男',
              value:1
            },
            {
              label:'女',
              value:0
            }
          ]
        }
      },
      methods: {
        doLogin()
        {
          var params={
            account:this.userName,
            password:this.passWord
          }
          this.$http.post("http://localhost:8989/fornote/user/login",params).then(response =>{
            // this.$forceUpdate();
            console.log(response.data);
            if(response.data.code==200)
            {
              //保存登录信息
              sessionStorage.setItem("user",response.data)
              this.$router.push("/index");
            }else if (response.data.code==-2){
              this.$message({
                message:"您已被管理员封禁！",
                type:'warning'
              })
            }else if (response.data.code!=200){
              this.$message({
                message:"用户名密码错误！！",
                type:'warning'
              })
            }

          })
        },
        show()
        {
          this.showRegister=true;
        },
        register()
        {
          this.$http.post("http://localhost:8989/fornote/user/register",this.resParams).then(response =>{
            console.log(response.data);
            if(response.data.code==200)
            {
              this.$message(response.data.data)
              this.$router.push("/index");
            }else if (response.data.code!=200){
              this.$message({
                message:response.data.data,
                type:'warning'
              })
            }

          })
        },
        close()
        {
          this.resParams.account=''
          this.resParams.name=''
          this.resParams.password=''
          this.resParams.gender=1
          this.resParams.introduce=''
          this.showRegister=false;
        }
      }
    }
</script>

<style scoped>
  .el-dialog .el-dialog__header {
    background: #2cc8f8;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
  }
</style>
